import { useSyncExternalStore } from "react";

/**
 * 自定义 Hook，用于管理 localStorage 存储
 * @template T - 存储值的类型
 * @param {string} key - localStorage 的键名
 * @param {T} initialValue - 初始值
 * @returns {[T, (value: T) => void]} - 返回一个元组，包含当前值和设置值的函数
 */
export const useStorage = <T>(key: string, initialValue: T): [T, (value: T) => void] => {
    /**
     * 订阅 storage 变化的函数
     * @param {() => void} onStoreChange - storage 变化时的回调函数
     * @returns {() => void} - 清理函数，用于移除事件监听
     */
    const subcribe = (onStoreChange: () => void) => {
        window.addEventListener('storage', onStoreChange);
        return () => window.removeEventListener('storage', onStoreChange);
    }

    /**
     * 获取当前 storage 值的函数
     * @returns {T} - 返回存储的值，如果不存在则返回初始值
     */
    const getSnapshot = () => {
        const item = localStorage.getItem(key);
        return item ? JSON.parse(item) : initialValue;
    }

    // 使用 React 的 useSyncExternalStore 来同步外部存储
    const res = useSyncExternalStore(subcribe, getSnapshot);

    /**
     * 设置 storage 值的函数
     * @param {T} value - 要存储的新值
     */
    const setStorage = (value: T) => {
        localStorage.setItem(key, JSON.stringify(value));
        window.dispatchEvent(new StorageEvent('storage'));
    }

    return [res, setStorage];
}